<template>
  <div class="shell">
    <div class="leftScrollbar">
      <el-scrollbar>
        <div class="scrollbar-flex-content">
          <div
            :class="{ tabChild: true, active: item.active }"
            v-for="(item, index) in tabsMeun"
            @click="openPage(item)"
            :key="index"
          >
            <span>{{ item.title }}</span>
            <SvgIcon
              v-if="item.closeAble"
              name="fork"
              :size="16"
              @click.stop="offPage(item)"
            ></SvgIcon>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="rightBtn">
      <div class="pageBtn">
        <el-dropdown
          size="small"
          @command="command"
          split-button
          type="primary"
        >
          操作页签
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">关闭当前</el-dropdown-item>
              <el-dropdown-item command="2">关闭其他</el-dropdown-item>
              <el-dropdown-item command="3">关闭所有</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="rushPage">
        <el-button size="small" type="primary" icon="Refresh" @click="reload"
          >重新载入系统</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useTabsMeun } from "@/store/tabsMeun";
const { tabsMeun } = storeToRefs(useTabsMeun());
const { changeTabs, deleteTabs } = useTabsMeun();
let router = useRouter();
function openPage(item: any) {
  changeTabs(item);
  router.replace(item.path);
}
function offPage(item: any) {
  deleteTabs([item]); //删除历史路由
  let index = tabsMeun.value.findIndex((item) => item.active == true);
  if (index == -1) {
    //判断删除的路由包含当前路由吗，包含的话就要激活剩余最后一个路由
    changeTabs(
      JSON.parse(JSON.stringify(tabsMeun.value[tabsMeun.value.length - 1]))
    );
    router.replace(tabsMeun.value[tabsMeun.value.length - 1].path);
  }
}
const command = (e: string) => {
  switch (e) {
    case "1":
      let index = tabsMeun.value.findIndex((item) => item.active == true);
      if (index == 0) {
        //如果当前页是数据分析则不能关闭
        return;
      }
      tabsMeun.value = tabsMeun.value.filter((item) => {
        return item.active == false || item.path == "/index";
      });
      router.replace(tabsMeun.value[tabsMeun.value.length - 1].path);
      break;
    case "2":
      tabsMeun.value = tabsMeun.value.filter((item) => {
        return item.active == true || item.path == "/index";
      });
      break;
    case "3":
      tabsMeun.value = [JSON.parse(JSON.stringify(tabsMeun.value[0]))];
      router.replace(tabsMeun.value[0].path);
      break;
    default:
      break;
  }
};
const reload = () => {
  window.location.reload();
};
</script>

<style lang="scss" scoped>
.shell {
  width: 100%;
  // background-color: #963b3b;
  height: 50px;
  // padding-top: 5px;
  border-bottom: 5px #000 solid;
  display: flex;
  box-sizing: border-box;
  // border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
  .leftScrollbar {
    width: calc(100% - 240px);
    height: 100%;
    padding-top: 5px;
    box-sizing: border-box;
    .scrollbar-flex-content {
      display: flex;
      align-items: center;
      .tabChild {
        min-width: 115px;
        padding: 0 10px;
        height: 35px;
        background-color: #fff;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        margin-right: 2px;
        span {
          font-size: 16px;
          margin-right: 10px;
        }
      }

      .active {
        background-color: #000;
        color: #ccc;
      }
      .active:hover {
        color: #fff;
      }
    }
  }

  .rightBtn {
    width: 240px;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    border-left: 1px #ccc solid;
  }
}
</style>
